<template>
  <view class="common-auth">
    <view class="common-auth__body">
      <view class="common-auth__row common-auth__brand">
        <image class="common-auth__image" src="{{src}}"></image>
        <view class="common-auth__harline"></view>
      </view>
      <view class="common-auth__row common-auth__req">
        <view class="common-auth__reqtitle">研途教育申请获得以下权限</view>
        <view class="common-auth__reqlist">
          <view class="common-auth__reqitem">
            <view class="common-auth__dot">·</view>
            <view>获得你公开的信息:（昵称、头像等）</view>
          </view>
        </view>
      </view>
      <view class="common-auth__row common-auth__action">
        <button class="common-auth__authbtn"
                open-type="getUserInfo"
                bind:tap="onTapAuth"
                bind:getuserinfo="_mtOnGetUserInfo"
                hover-class="common-auth__authbtn-hover">授权登录
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  const mtAuthBehavior = require('../../behaviors/mt-auth.behavior')

  export default {
    behaviors: [
      mtAuthBehavior
    ],
    data() {
      return {
        src: 'http://oss.kaoyanvip.cn/uploads/file1556528127569.png',
      }
    },
    attached: function () {
    },
    methods: {
      onGetUserInfo(e) {
        console.d(e)
      },
      onTapAuth(e) {
        console.log('点击授权登录');
      },
      mtGetUserInfoFail(e) {
        // console.d('failed')
        this.$native.emit('failed', e.detail)
      },
      mtGetUserInfoSuccess(e) {
        // console.d('success')
        this.$native.emit('success', e.detail)
      },
      onCommonTap(e) {
        this.$native.emit('common', e.detail)
      }
    },
  }
</script>

<style lang="less">
  .common-auth {
    margin-top: 194rpx;

    &__row {
      width: 612rpx;
      margin: 0 auto;
    }

    &__brand {
      margin-bottom: 60rpx;
    }

    &__image {
      width: 284rpx;
      height: 94rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 110rpx;
    }

    &__harline {
      height: 2rpx;
      background-color: #e0e0e0;
    }

    &__req {
      margin-bottom: 116rpx;
    }

    &__reqtitle {
      font-size: 32rpx;
      color: rgb(0, 0, 0);
      line-height: 1.42;
      margin-bottom: 20rpx;
    }

    &__reqitem {
      font-size: 30rpx;
      color: rgb(122, 122, 122);
      line-height: 1.375;
      display: flex;
      align-items: center;
    }

    &__dot {
      font-size: 40rpx;
    }

    &__authbtn {
      width:612rpx;
      background-color:#19c974;
      color:#fff;
      border:none;
      &:after {
        border: none;
      }
    }
  }
</style>
